/* 
1 页面数据渲染
  1 定义一个函数
  2 发送请求获取数据  渲染页面 
    1 token 几乎都是携带在请求头中   写法几乎定死!！！
2 点击修改数据
 */


//获取数据渲染页面
const tbody = document.querySelector('tbody')
async function getScore() {
    const res = await axios({
        url: '/score/list',
        //请求头（对象）中携带token,
        //为了进行身份验证
        // headers: {
        //     //一般就写这个名字
        //     Authorization: localStorage.getItem('token')
        // }
    })
    console.log(res.data.data);

    //生成一个html
    let html = ''
    //对一个对象遍历
    for (const key in res.data.data) {
        const { name, score } = res.data.data[key]
        html += `<tr>
        <th scope="row">${key}</th>
        <td>${name}</td>
        <td class="score" data-stu_id=${key}  data-batch="1">${score[0]}</td>
        <td class="score" data-stu_id=${key}  data-batch="2">${score[1]}</td>
        <td class="score" data-stu_id=${key}  data-batch="3">${score[2]}</td>
        <td class="score" data-stu_id=${key}  data-batch="4">${score[3]}</td>
        <td class="score" data-stu_id=${key}  data-batch="5">${score[4]}</td>
      </tr>`
    }
    //把遍历后的html添加到tbody里
    tbody.innerHTML = html
}
getScore()

//给tbody绑定双击事件，短时间内点击两次触发
tbody.addEventListener('dblclick', function (e) {

    const target = e.target
    //判断是不是想要的元素（学生成绩）
    if (target.classList.contains('score')) {
        //创建一个input节点
        const input = document.createElement('input')
        input.type = 'text'
        input.value = target.innerText
        //插入到对应的位置
        target.appendChild(input)
        //给input设置获取焦点
        input.focus()
        //给input设置失去焦点
        input.addEventListener('blur', updataScore)

        //给input绑定键盘按下事件
        input.addEventListener('keydown', function (e) {
            if (e.key === 'Enter') {
                //解绑失去焦点事件
                //为了不触发失去焦点事件
                input.removeEventListener('blur', updataScore)
                updataScore()
            }
        })

        //封装一个修改渲染函数
        async function updataScore() {
            //获取参数 发送请求，完成修改
            //获取参数 id,第几次成绩,分数
            const { stu_id, batch } = target.dataset
            const score = input.value
            const result = await axios({
                url: '/score/entry',
                method: 'post',
                data: {
                    stu_id,
                    batch,
                    score,
                }
            })
            console.log(result);
            //如果获取成功，就弹窗提示
            if (result.data.code === 0) {
                toastr.success(result.data.message, '恭喜')
            }
            getScore()

        }
    }

})
